<template>
  <div class="in-page">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="用户管理" name="first">
        <div class="filter-box">
          <el-date-picker v-model="curDate" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          <el-button @click="getDataList(true)" type="primary" icon="el-icon-search">查询</el-button>
          <el-button @click="resetParams" type="warning" icon="el-icon-delete">重置</el-button>
        </div>
        <el-table
          highlight-current-row
          border
        :height="tableHeight"
          :header-cell-style="{
            background: '#edfdf9',
            color: '#000',
            fontWeight: '500',
            fontSize: '16px',
          }"
          :data="pageData.list"
          :default-sort="{ prop: 'updateTime', order: 'ascending' }"
          v-loading="dataListLoading"
          ref="table"
          style="width: 100%"
        >
            <el-table-column
              prop="testerName"
              header-align="center"
              align="center"
              :show-overflow-tooltip="true"
              min-width="100"
              label="姓名">
            </el-table-column>
            <el-table-column
              prop="avatar"
              header-align="center"
              align="center"
              :show-overflow-tooltip="true"
              min-width="90"
              label="头像">
              <template slot-scope="scope"><el-avatar :size="80" :src="scope.row.avatar"></el-avatar></template>
            </el-table-column>
            <el-table-column
              prop="gender"
              header-align="center"
              align="center"
              :show-overflow-tooltip="true"
              min-width="90"
              label="性别">
            </el-table-column>
            <el-table-column
              prop="school"
              header-align="center"
              align="center"
              :show-overflow-tooltip="true"
              min-width="150"
              label="学校">
            </el-table-column>
            <el-table-column
              prop="grade"
              header-align="center"
              align="center"
              :show-overflow-tooltip="true"
              min-width="90"
              label="班级">
              <template slot-scope="scope">{{ scope.row.gradeName }}{{ scope.row.className }}</template>
            </el-table-column>
            <el-table-column
              prop="itemCode"
              header-align="center"
              align="center"
              :show-overflow-tooltip="true"
              min-width="100"
              label="项目">
              <template slot-scope="scope">{{ scope.row.itemName }}</template>
            </el-table-column>
            <el-table-column
              prop="score"
              header-align="center"
              align="center"
              :show-overflow-tooltip="true"
              min-width="100"
              label="成绩">
              <template slot-scope="scope">{{ scope.row.score | formatMoney }}{{scope.row.unit}}</template>
            </el-table-column>
            <el-table-column
              prop="startTime"
              header-align="center"
              align="center"
              :show-overflow-tooltip="true"
              min-width="150"
              label="运动开始时间">
            </el-table-column>
            <el-table-column
              prop="endTime"
              header-align="center"
              align="center"
              :show-overflow-tooltip="true"
              min-width="150"
              label="运动结束时间">
            </el-table-column>
            <el-table-column
              fixed="right"
              header-align="center"
              align="center"
              min-width="90"
              label="操作">
              <template slot-scope="scope">
                <el-button type="text" style="padding:0;" v-if="isAuth('sport:sportapi:update')" @click="updateHandle(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second">校内体育行为</el-tab-pane>
      <el-tab-pane label="角色管理" name="third">体育测试</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import commonSelect from '@/components/common-select'
import $ from 'jquery'
import UpdatePassword from '@/views/main-navbar-update-password'
import { clearLoginInfo, initQueryParams } from '@/utils'
import { dateSelectShorts, formatMoney } from '@/utils/common'
export default {
  data() {
    return {
      curDate:[],
      activeName: "first",
      dataListLoading:false,
      queryParams: initQueryParams(),
      tableHeight: document.body.clientHeight - 350,
      pageData: {
        totalCount: 0,
        list: [
          {testScore:"sadas"}
        ],
        extData: {},
      }
    };
  },
  mounted () {
    let that = this;

    window.addEventListener("scroll", this.onScroll);
    this.$nextTick(() => {
      that.getDataList(true);
    });
  },
  computed: {
    documentClientHeight: {
      get () { return this.$store.state.common.documentClientHeight },
      set (val) { this.$store.commit('common/updateDocumentClientHeight', val) }
    },
    documentClientWidth: {
      get () { return this.$store.state.common.documentClientWidth },
      set (val) { this.$store.commit('common/updateDocumentClientWidth', val) }
    },
    userId: {
      get() { return this.$store.state.user.id },
      set(val) { this.$store.commit('user/updateId', val) }
    },
    userName: {
      get() { return this.$store.state.user.name },
      set(val) { this.$store.commit('user/updateName', val) }
    },
    userTel: {
      get() { return this.$store.state.user.tel },
      set(val) { this.$store.commit('user/updateTel', val) }
    },
    userMobile: {
      get() { return this.$store.state.user.mobile },
      set(val) { this.$store.commit('user/updateMobile', val) }
    },
    userDeptId: {
      get() { return this.$store.state.user.deptId },
      set(val) { this.$store.commit('user/updateDeptId', val) }
    },
    userDeptName: {
      get() { return this.$store.state.user.deptName },
      set(val) { this.$store.commit('user/updateDeptName', val) }
    },
    userType: {
      get() { return this.$store.state.user.userType },
      set(val) { this.$store.commit('user/updateUserType', val) }
    }
  },
  methods: {
    resetParams() {
      this.queryParams = initQueryParams()
      this.getDataList(true)
    },
    // 获取数据列表
    getDataList (isReload) {
      if (isReload) {
        this.queryParams.pageNo = 1
      }
      this.dataListLoading = true
      this.$http({
        url: this.$http.requestUrl('/sport/sportapi/list'),
        method: 'get',
        params: this.$http.requestParams(this.queryParams)
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.pageData = data.page
        }
        this.dataListLoading = false
      })
    },
  }
};
</script>
<style scoped lang="scss">
.filter-box {
  background: #edfdf9;
  box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1);
  margin-bottom: 20px;
  display: flex;
  padding: 15px 20px;
  border-radius: 10px;
  .el-button {
    margin-left: 10px;
  }
}
.in-page{
  padding:10px;
  background:#fff;
}
</style>